// ‌动态修改组件属性的核心方法‌是通过编程语言提供的API或方法来实现对组件属性的动态修改。这通常涉及到获取组件实例，然后通过特定的函数或方法来改变其属性值。

// 在不同的编程环境和框架中，动态修改组件属性的方法有所不同：

// 在 React 中，动态修改组件的属性通常是通过状态（state）管理来实现的。

// ‌在Vue.js中‌，可以通过绑定数据来动态更改组件属性。首先，在Vue组件中定义需要动态更改的属性，然后在Vue实例中将该属性绑定到数据上。通过修改数据，可以间接修改组件属性‌1。

// ‌在Android中‌，可以使用LayoutParams动态设置控件的位置和属性。例如，通过setLayoutParams方法设置控件的边距、可见性等‌2。

// ‌在JavaScript中‌，可以使用setAttribute方法来动态改变元素的属性。例如，通过document.getElementById获取元素后，使用setAttribute方法来修改其属性值‌3。

// ‌在OpenHarmony中‌，可以通过实现AttributeModifier接口来动态设置组件属性。例如，通过自定义实现AttributeModifier接口，在特定方法中设置属性值，以适应不同状态下的样式‌4。

// import React from 'react'

// function ChildComponent({propName="默认值"}){
//   return (
//     <div>
//         <div>{propName}</div>
//     </div>
//   )
// }

// export default ChildComponent

import React from 'react';

interface DynamicComponentProps {
  color: string;
  size: number;
}

const DynamicComponent: React.FC<DynamicComponentProps> = ({ color, size }) => {
  return (
    <div style={{ color, fontSize: `${size}px` }}>
      This is a dynamic component!
    </div>
  );
};

export default DynamicComponent;